<template>
	<view class="drug">
		<view class="drug_title"><text>所有信息保密，仅限于向当地疾控机构提供</text></view>
		<view class="drug_from public_sty">
			<view class="drug_box" v-for="(item, index) in formData" :key="index">
				<view class="drug_con">
					<view class="indent"><text>*</text></view>
					<text>{{ item.label }}</text>
				</view>

				<view class="">
					<!-- <uni-easyinput  v-model="" placeholder="" /> -->
					<uni-easyinput
						id="0"
						:type="index == 2 ? 'idcard' : 'text'"
						v-if="item.required"
						value=""
						v-model="item.value"
						:maxlength="index == 4 ? '11' : '-1'"
						:placeholder="item.placeholder"
						placeholder-style="color:#C0C0C0;"
						@blur="inputChecked"
						@focus="focus(item.id)"
					/>
					<radio-group @change="radioChange">
						<label v-for="(item, idx) in item.genderlist" :key="idx">
							<radio :value="item.value" :checked="item.checked" style="transform:scale(0.7)" />
							<text>{{ item.name }}</text>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="drug_infor public_sty">
			<view class="drug_infor_title"><text>药品信息</text></view>
			<view class="drugSty" v-for="(item, index) in drugInfor" :key="index">
				<view class="">
					<text>{{ item.drugname }}</text>
				</view>
				<view class="">
					<text>x{{ item.drugQuantity }}</text>
				</view>
			</view>
		</view>
		<button class="btn" type="primary" @click="submit"><text>提交</text></button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: [
				{
					id: 0,
					value: '',
					label: '姓名',
					required: true,
					placeholder: '请输入姓名'
				},
				{
					id: 1,
					label: '籍贯',
					value: '',
					required: true,
					placeholder: '请输入籍贯'
				},
				{
					id: 2,
					label: '身份证号',
					value: '',
					required: true,
					placeholder: '请输入身份证号'
				},
				{
					id: 3,
					label: '性别',
					value: '',
					requires: false,
					genderlist: [
						{
							value: 0,
							name: '男',
							checked: true
						},
						{
							value: 1,
							name: '女',
							checked: false
						}
					]
				},
				{
					id: 4,
					label: '手机号',
					value: '',
					required: true,
					placeholder: '请输入手机号'
				},
				{
					id: 5,
					label: '症状',
					value: '',
					required: true,
					placeholder: '请输入症状'
				},
				{
					id: 6,
					label: '现居住址',
					value: '',
					required: true,
					placeholder: '请输入居住地址'
				}
			],
			inputContent: '',
			drugInfor: [
				{
					drugname: '小儿力克舒 小儿氨酚黄那敏颗粒18袋',
					drugQuantity: 1
				},
				{
					drugname: '999感冒灵',
					drugQuantity: 1
				}
			],
			drugData: {
				name: '',
				nativePlace: '',
				IDnumber: '',
				gender: 0,
				phone: '',
				symptom: '',
				address: ''
			}
		};
	},
	methods: {
		submit() {
			
		},
		focus(id) {
			this.inputContent = id;
		},
		inputChecked(e) {
			console.log(e);

			let val = e.detail.value;
			if (!val || val == '') {
				return '';
			}
			if (this.inputContent == 0) {
				const rule = /[^\u4E00-\u9FA5]/g;
				this.$nextTick(function() {
					this.drugData.name = val.replace(rule, '');
					if (this.drugData.name !== val) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的姓名'
						});
					} else {
						return '';
					}
				});
			} else if (this.inputContent == 1) {
				this.drugData.nativePlace = val;
			} else if (this.inputContent == 2) {
				this.drugData.IDnumber = val;
			} else if (this.inputContent == 5) {
				this.drugData.symptom = val;
			} else if (this.inputContent == 6) {
				this.drugData.address = val;
			} else if (this.inputContent == 4) {
				const rule = /^1[3456789]\d{9}$/;
				if (!rule.test(val)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					});
				} else {
					this.drugData.phone = val.substring(0,3)+'****'+val.substring(7);
					this.formData[this.inputContent].value = val.substring(0,3)+'****'+val.substring(7);
				}
			}
		},
		radioChange(e) {
			// console.log(e.detail.value)
			this.drugData.gender = e.detail.value;
		}
	}
};
</script>

<style lang="scss" scoped>
.drug {
	background: #f9faf9;
	height: 100vh;
	padding: 0rpx 30rpx;
	.drug_title {
		text-align: center;
		font-size: 28rpx;
		color: #999999;
		font-weight: 400;
		padding: 30rpx 0rpx 24rpx 20rpx;
	}
	.drug_from {
		padding: 30rpx;
		// border: 2rpx solid;
	}
}

.drug_box {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	.drug_con {
		display: flex;
		width: 30%;
	}
	.indent {
		color: #ff5f42;
		line-height: 60rpx;
		font-weight: 400;
		margin-right: 10rpx;
	}
}
.btn {
	position: fixed;
	bottom: 0%;
	width: 92%;
	margin-bottom: 40rpx;
	border-radius: 20rpx;
	text {
		font-size: 28rpx;
	}
}
.drug_infor {
	padding: 30rpx;
	margin-top: 26rpx;
}
.drugSty {
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	color: #999999;
	font-weight: 400;
	margin: 12rpx 0rpx;
}
/deep/ .is-input-border {
	border: none !important;
}
</style>
